<div *ngIf="currentMap">
  <form [formGroup]="form">
    <ng-container *ngFor="let key of current$ | async | keyvalue">
      <div *ngIf="key.key !== 'isDefault'" class="edit-text-block">
        <div class="edit-text-flex" *ngIf="default$ | async as defaultmap">
          <cnsl-form-field class="edit-text-formfield">
            <cnsl-label>{{ key.key }}</cnsl-label>
            <textarea
              class="edit-text-area"
              cnslInput
              [formControlName]="key.key"
              [placeholder]="$any(defaultmap[key.key])"
              [name]="key.key"
              [ngClass]="{ defaulttext: form.get(key.key)?.value === '' }"
            ></textarea>
            <div class="edit-text-chips" *ngIf="warnText[key.key] === undefined">
              <ng-container *ngFor="let chip of chips">
                <div
                  class="chip"
                  cnslCopyToClipboard
                  [valueToCopy]="chip.value"
                  (copiedValue)="copied = $event"
                  (click)="addChip(key.key, chip.value)"
                >
                  <span class="key">{{ chip.key | translate }}</span>
                  <span class="value">{{ chip.value }}</span>
                  <i *ngIf="copied !== chip.value" class="las la-clipboard"></i>
                  <i *ngIf="copied === chip.value" class="las la-clipboard-check"></i>
                </div>
              </ng-container>
            </div>
          </cnsl-form-field>
          <div class="edit-text-actions">
            <button
              matTooltip="{{ 'ACTIONS.RESETDEFAULT' | translate }}"
              mat-icon-button
              [disabled]="form.get(key.key)?.value === defaultmap[key.key] || disabled"
              (click)="form.get(key.key)?.setValue(defaultmap[key.key])"
              (mouseenter)="
                form.get(key.key)?.value !== defaultmap[key.key] && setWarnText(key.key, $any(defaultmap[key.key]))
              "
              (mouseleave)="setWarnText(key.key, undefined)"
            >
              <i class="las la-history"></i>
            </button>
            <button
              matTooltip="{{ 'ACTIONS.RESETCURRENT' | translate }}"
              mat-icon-button
              [disabled]="form.get(key.key)?.value === currentMap[key.key] || disabled"
              (click)="form.get(key.key)?.setValue(currentMap[key.key])"
              (mouseenter)="
                form.get(key.key)?.value !== currentMap[key.key] && setWarnText(key.key, $any(currentMap[key.key]))
              "
              (mouseleave)="setWarnText(key.key, undefined)"
            >
              <i class="las la-undo"></i>
            </button>
          </div>
        </div>
      </div>
      <cnsl-info-section *ngIf="warnText[key.key] !== undefined" class="edit-text-info" [type]="InfoSectionType.WARN">
        {{ 'ACTIONS.RESETTO' | translate }} <cite>'{{ warnText[key.key] }}'</cite></cnsl-info-section
      >
    </ng-container>
  </form>
</div>
